<style rel="stylesheet/scss" lang="scss" scoped>
  .active{
    background-color: #0077B1;
  }
  .taskUl li{
    color: white;
  }
</style>
<template>
  <div class="app-container">
    <el-row type="flex" class="row-bg">
      <el-col :span="8" style="border:1px solid #EBEEF5">
        <!--任务选择框-->
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="任务列表" name="1">
            <ul class="taskUl">
              <li :class="activeClass == index ? 'active' : ''"
                  v-for="(item,index) in this.taskDefList" :key="index" @click="getItem(index)" style="margin:1% 6%">
                <a>
                  <el-link :underline="false" type="primary" @click="selectTask(item.taskCode)">
                    {{item.taskCode}}
                  </el-link>
                </a>
              </li>
            </ul>
          </el-collapse-item>
          <!--<el-collapse-item title="??" name="2">
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="??" name="3">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </el-collapse-item>
          <el-collapse-item title="??" name="4">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>-->
        </el-collapse>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple-light" style="border:1px solid #D6D8DB;">
          <div style="font-size: 14px;margin: 1%;font-weight: 700;">任务执行结果统计
            <el-tooltip class="item" effect="dark" content="任务执行结果统计" placement="bottom">
              <i  style="margin-left: 3%" class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <TaskZxEchars :dataInfo="this.aa" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import TaskZxEchars from '../../../components/TaskZxEchars'
  import jobDef from '@/api/cycleJob/job_def'
  export default {
    name: 'taskEchars',
    components: {TaskZxEchars},
    props: {
      jobCode: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        activeClass: -1,
        activeName: '1',
        aa:{},
        taskDefList:[]
      };
    },
    created(){
      //初始化任务数据
      this.initTaskList();
    },
    methods:{
      initTaskList(){
        if(this.jobCode!=''){
          jobDef.queryTaskList(this.jobCode).then(res=>{
            this.taskDefList = res;
          })
        }
      },
      handleChange(){
        this.aa = {isOrder:'1'}
      },
      //选择某个任务的实例图
      selectTask(param){
        jobDef.qryTaskInfoByEchars(param).then(res=>{
          this.aa = res;
        })
      },
      getItem(index){
        this.activeClass = index
      }
    },

  }


</script>
